@charset "utf-8";
@import "./_reset";

@function r($px){
	@return $px / 50 * 1rem
}

//中部内容
.section_content{
	position: fixed;
	left: 0;
	right: 0;
	top: r(89);
	bottom: r(96);
	overflow: auto;
	//轮播图
	.coll_img{
		width: 100%;
		height: r(357);
		position: relative;
		border-bottom: 10px solid #f5f5f5;
		img{
			width: 100%;
			height: 100%;
		}
		.img_hid{
			width: 100%;
			height: r(104);
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			bottom: 0;
			right: 0;
			color: white;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			h1,p{
				
			}
			h1{
				color: white;
				font-size: r(26);
				height: r(30);
				width: 100%;
				margin-left:r(20) ;
			}
			p{
				// display: inline-block;
				// float: left;
				font-size: r(11);
				margin-left:r(20) ;
				vertical-align: bottom;
				line-height:r(17) ;
				i{
					font-size: r(20);
				}
			}
			span{
				float: right;
				margin-right:r(20) ;
				vertical-align: bottom;
			}
		}
	}
	//课程列表
	.coll_list{
		height: r(608);
		border-bottom: 10px solid #f5f5f5;
		position:relative;   /*给父元素设置相对定位*/
		//课程列表
		.list_box{
			width: r(582);
			height: r(562);
			position:absolute;    /*给子元素设置绝对定位*/
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);   /*css3属性*/
			// 列表头部介绍
			.top_list_box{
				margin-bottom: r(20);
				.l_left{
					width: r(70);
					.circle{
						width: r(56);
						height: r(56);
						border-radius: 50%;
						background-color: #898989;
					}
				}
				p{
					color:#898989 ;
					width: r(300);
				}
				.kimin{
					font-size: r(28);
				}
				.l_right{
					button{
						width: r(223);
						height: r(58);
						border-style: none;
						background-color: #b20000;
						color: white;
						font-weight: bold;
						span,i{
							vertical-align: middle;
						}
						i{
							margin-left: r(10);
						}
						
					}
				}
			}
			// 课程类型与时间
			.content_list{
				height: r(28);
				display: flex;
				justify-content: space-between;
				margin-bottom: r(20);
				.con_left{
					font-size: r(25);
				}
				.con_right{
					font-size: r(16);
				}
			}
			// 课程图片
			.img_list{
				height: r(432);
				width: r(582);
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
}